<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">办公园区</span>
        <span class="banner-main__subtitle" style="line-height:24px">
            企业随着不断的发展和对数字化转型的需要，对自身园区和办公服务提出更高要求，<br/>
            通过在园区运营和管理中运用云计算、物联网、人工智能等新技术，<br/>
            实现园区数据融合、状态可视、业务事件管控，同时在办公服务领域，引入数字办公、智能会议室、智慧食堂等，<br/>
            打造安全、舒适、高效、绿色的新型企业智慧园区 <br/>
        </span>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">趋势分析</h1>
        <h6 class="model-desc">Trend Analysis</h6>
        <div class="card">
          <div style="display:flex">
            <div style="font-size:14px;line-height:24px;margin-right:10px">
               <span style="font-size:20px;font-weight:bold">企业办公园区发展趋势</span><br/>
                <span style="font-size:16px;font-weight:bold">企业不断发展，对数字化转型的需求</span><br/>
                面对飞速变化的外部环境，企业传统的运作模式也需要与时俱进。企业需要适时、适当地推动战略、机构、人力资源以及管理理念的变革，
                拥抱数字化转型，以适应不断变化的内外环境，满足企业继续生存、发展、壮大的需求<br/>
                <br/>

               <span style="font-size:16px;font-weight:bold">智慧园区是企业对外形象的窗口</span><br/>
                企业园区是企业对外形象的窗口，是企业文化、企业精神的承载体，其运营存在着科技和文化、经济和绿色、健康和高效的冲突问题，智慧化应用是企业园区变成有生命力的有机体、传递科技赋能的重要标志信号<br/>
                <br/>

                <span style="font-size:16px;font-weight:bold">AI和智能办公的融合越来越紧密，办公智能化越来越高</span><br/>
                随着信息化、智能化的发展，通过在园区运营和管理中运用云计算、物联网、大数据、人工智能等新技术，同时在办公服务领域，引入数字办公、智慧会议室、智慧食堂等，
                打造安全、舒适、高效、绿色的新型企业智慧园区已成为各大企业广泛的共识<br/>
                <br/>
            </div>
            <div align="center"><img src="@/assets/officeArea1.jpg" width="630px" /></div>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案业务架构</h1>
        <h6 class="model-desc">Scheme business architecture</h6>
          <div >
          <el-tabs style="color:#FFFFFF;" v-model="activeName" @tab-click="handleClick" :stretch=true >
            <el-tab-pane  label="             综合安防             " name="first">
              <div style="display:flex">
                <div style="width:50%;font-size:14px;line-height:24px">
                    <span sytle="font-size:16px;">综合安防</span><br/><br/>
                    综合安防以“事件联动”为核心，建设视频巡更、周界入侵防控、消防联动等，具有“集中管理、安防可视、灵活联动、决策支持”等特性，最终实现园区安全智能可视化的管理，全面提升企业园区安防效能，切实保护园区人、财产安全，提高园区安全生产
                    <br/>
                    - IOC平台通过调取巡逻路线上的摄像机视频，实现在线保安巡逻，大大提升了巡逻的效率，减轻了安保人员的工作强度<br/>
                    - 周界摄像头结合智能视频入侵检测技术，自动侦测人员入侵，降低周界系统的误报率，避免不必要的人力浪费<br/>
                    - 消防应急处置，人、事、物联动指挥。传感器收集到消防报警，附近摄像机头二次确认，联动打开门禁闸机，信息系统推送灾情，安保人员现场处理<br/>
                
                </div>
                <div align="center"><img src="@/assets/officalArea2.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             便捷通行             " name="second">
              <div style="display:flex">
                <div style="width:50%;font-size:14px;line-height:24px">
                    <span sytle="font-size:16px;">便捷通行</span><br/><br/>
                    提供多种通行方式，精确配置每个员工可以通行的区域，如门禁，闸机，实现员工、访客车辆无感知通行，真正实现无人值守，降低人工成本。支持公众号、访客一体机、IOC运营平台多方式预约，访客通行区域灵活配置，通行记录可查<br/>
                    <br/>
                    - 人脸闸机代替保安岗，“无感知”畅行园区<br/>
                    - 智慧停车：无人值守、停车引导、移动支付的全流程智慧体验<br/>
                    - 访客自助接待，多种预约方式畅行园区<br/>
                
                </div>
                <div align="center"><img src="@/assets/officalArea3.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             设施管理             " name="third">
            <div style="display:flex">
                <div style="width:50%;font-size:14px;line-height:24px">
                    <span sytle="font-size:16px;">设施管理</span><br/><br/>
                    针对传统设施管理效率低、易丢失、管理难等不足，构建园区设备设施信息化管理体系，实现园区设施管理的“可见、可查、可管、可溯”，全面规范园区设施管理工作，降低管理成本，提升管理效率<br/>
                    <br/>
                    - 建立设施基础台账，显示出对应的具体设施设备信息条目<br/>
                    - 实时监测园区内相关设备设施的状态，在发生异常情况时进行预警或告警<br/>
                    - 通过工单管理实现设备设施报事报修全流程管控，提升维修工作的及时性<br/>
                
                </div>
              <div align="center"><img src="@/assets/officalArea4.jpg" width="700px" /></div><br />
            </div>
            </el-tab-pane>
            <el-tab-pane label="            能耗管理             " name="fourth">
              <div style="display:flex">  
                <div style="width:50%;font-size:14px;line-height:24px">
                    <span sytle="font-size:16px;">能耗管理</span><br/><br/>
                   能耗管理实时采集园区用水、用电、用气等能耗设备数据，并从多个角度和维度对园区日常能耗运营过程中的数据和业务进行分析，提供分析结果和报表呈现。有效追溯用能过程，有效挖掘能耗数据，多角度辅助决策，提供能耗控制策略，实现能耗优化，帮助园区节能降耗，降低运营成本<br/>
                    <br/>
                    - 能效可视：能源利用精细可视，为能源综合管理提供有效支撑<br/>
                    - 能效可诊：灵活可配置的能效诊断专家系统，有效挖掘能耗漏洞<br/>
                    - 能效可优：输出运行优化建议，减少对操作人员技能要求<br/>
                
                </div>
                <div align="center"><img src="@/assets/officalArea5.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             资产管理             " name="fifth">
              <div style="display:flex">
                <div style="width:50%;font-size:14px;line-height:24px">
                      <span sytle="font-size:16px;">资产管理</span><br/><br/>
                      资产管理实现资产采购、出入库、变更、处置、调拨等环节的全生命周期管控，建立资产台账、绑定RFID标签、非法携出联动告警。资产盘点自动盘点、快速、准确、降低人工成本，提升盘点效率。实时统计园区资产成本、种类分析，实现资产管理全面有序，推动园区资产管理向规范化、智能化、精细化、可视化的全面发展。<br/>
                      <br/>
                      - 资产位置实时监管，精确位置，掌控在手<br/>
                      - 秒级盘点亿万资产，大幅提升盘点效率<br/>
                      - 资产非法携出自动告警，安全烦恼从此不靠人<br/>
                  
                </div>
                <div align="center"><img src="@/assets/officalArea7.png" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             环境空间             " name="sixth">
              <div style="display:flex">
                <div style="width:50%;font-size:14px;line-height:24px">
                      <span sytle="font-size:16px;">环境空间</span><br/><br/>
                      实时监测会议室、办公室、户外的PM2.5、温湿度等环境指标，联动新风系统，营造舒适的生活和工作环境。实时获取空间状态，提升空间运营的效率。<br/>
                      <br/>
                      - 实现对环境的在线监测及数据运营分析，通过设置环境告警阈值实现对园区环境的告警<br/>
                      - 线上会议室预约、会议通知、会议室共享，提高空间使用率<br/>
                  
                </div>
                <div align="center"><img src="@/assets/officalArea8.svg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
            <el-tab-pane label="             办公服务             " name="seventh">
              <div style="display:flex">
                <div style="width:50%;font-size:14px;line-height:24px">
                      <span sytle="font-size:16px;">办公服务</span><br/><br/>
                      WeLink+企业智慧屏，助力企业数字化办公，通过联接团队、联接知识、联接业务、联接设备，快速提升企业办公效率；智能会议室让会议更高效、沟通“面对面”；智慧餐饮增强用餐体验及消费粘性。<br/>
                      <br/>
                      - WeLink：融合消息、会议、邮件、知识、能力开放等，打造企业数字化办公协作平台，实现团队、知识、业务、设备的全面连接<br/>
                      - 企业智慧屏：集智能书写、极清投屏、视频会议、开放办公应用为一体的智能终端产品，可以满足企业会议室、开放办公区、经理室、家庭书房等多场景的智慧办公需求<br/>
                      - 线下构建会议室使用闭环管理系统，线上随时随地高效开启视频会议<br/>
                      - 智慧餐饮服务，通过备餐管理、采购管理、菜品管理、价格管理、自动结算、经营分析，加强食堂内部管理，提升采购和经营效率，减少浪费；为消费者提供“线上+线下”多元化订餐及支付方式，整体就餐体验和效率提升30%<br/>
                </div>
                <div align="center"><img src="@/assets/officalArea9.jpg" width="700px" /></div><br />
              </div>
            </el-tab-pane>
          </el-tabs>
          </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案技术架构</h1>
        <h6 class="model-desc">Scheme Technology Architecture</h6>
        <div class="card">
          <div align="center"><img src="@/assets/officeArea.svg" width="862px" /></div><br />
          <span style="font-weight:bold;font-size:16px;line-height:14px">简介</span><br/>
          <br/>
          <span class="description">
              基于华为云+边缘智能+5G技术、联合伙伴端侧智能设备基于端边云架构，提供企业智慧园区解决方案，实现园区数据全融合、状态全可视、业务全可管、事件全可控，同时在办公服务领域，引入数字办公、智慧会议室、智慧食堂等，打造安全、舒适、高效、绿色的新型企业智慧园区。
          </span>
          <br/><br/>
          <span class="description">
            1. 北向应用服务层：提供园区综合安防、便捷通行等通用应用和企业办公服务<br/>

            2. 园区平台服务层：园区数字平台是智慧园区解决方案的核心，基于华为云智能视频分析、数据湖运营平台、ROMA平台等，达成汇聚公共能力、支撑上层业务能力、支撑水平业务扩展能力的目标<br/>

            3. 网络联接层：园区通信网包括园区办公网、视频专网、物联网、全WiFi、运营商通信网等<br/>

            4. 园区南向终端层：改造和接入已有的设备/子系统，实现园区子系统的数据融合及协同高效运营，实现联动<br/>
          </span>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">客户案例</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <div class="card-box">
            <b style="font-weight:bold">华为松山湖智慧园区</b><br />
            基于“自己的降落伞自己跳”的理念，华为以自有园区为试验田，基于数字平台，全面打通华为园区24个子系统，实现业务数据的全面融合，进而实现业务融合。让华为园区脱胎换骨，员工办公协同效率提升30%：基于华为WeLink实现公司全员桌面和移动协同办公，WeLink集成邮件、消息、会议、业务流程、行政等办公全场景，预计提升办公协同效率30%；行政效率提升30%：技防替代人防，提升安防等级，减少安防人力需求；园区资产线上全可视，一键盘点，大幅降低资产管理成本，提升资产使用率。
          </div> 
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Streamer from '@/components/Streamer/Streamer'
export default {
  components: {
    Streamer
  },
  data () {
    return {
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '结合人工智能快速定位园区非法入侵、烟火等安全事件，及时联动周边系统、人员进行防控处置，保证园区安全' },
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '汲取华为数字办公实践，融合消息、邮件、会议等服务，连接企业的团队、业务、知识、办公设备，实现高效协作的智能办公' },
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '通过车牌检测等AI算法，实现便捷通行、智慧餐饮等场景，让访客员工减少等待，工作更便捷、体验更好' },
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '打通数据孤岛，子系统融合，各种设备互联，实现园区态势可视、可管、可控，大幅提升园区管理效率' },
        ],
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      },
      activeName:"first",
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/bg1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
